<template>
  <md-page title="开始抽奖" showLeft>
    <view class="container">
      <image :src="data.configInfo?.prize_bg1" class="Jackpot-bg" />
      <view class="wrap">
        <view class="content">
          <view class="active-bg-wrap flex-c">
            <view class="active-column">
              <swiper
                :autoplay="data.autoplay"
                :interval="50"
                :duration="50"
                class="swiper"
                easing-function="linear"
                :indicator-dots="false"
                vertical
                circular
                layout-type="transformer"
                transformer-type="scaleAndFade"
                previous-margin="40rpx"
                next-margin="40rpx"
                @change="change"
                :current="data.current">
                <swiper-item v-for="(item, index) in data.list" :key="index">
                  <view class="carousel-grid">
                    <view :class="['carouse-image-grid', index === data.current ? 'active' : '']">
                      <image :src="item.img" class="carousel-image" mode="aspectFill"></image>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </view>
        <view class="btn" @click="debouncedHandleOpen">
          <md-button
            class="btn"
            :color="data.configInfo?.button_color1 || '#d92121'"
            :text-color="data.configInfo?.button_color1_text || '#ffffff'">
            开始抽奖
          </md-button>
        </view>
      </view>
    </view>
  </md-page>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 接口
import { prizelist, prizeRaffle } from '@/api';
// 工具
import { Toast } from '@/utils/util';
import { debounce } from 'lodash';
// 图片
import notWinning from '@/static/images/notWinning.png';

const data = reactive<any>({
  id: null, // 抽奖券id
  current: 0,
  list: [],
  interval: 50,
  autoplay: false,
  configInfo: {},
});

const change = (e: any) => {
  data.current = e.detail.current;
};

// 点击抽奖
const handleOpen = () => {
  if (data.list?.length == 0) {
    Toast('暂无奖品可进行操作！');
    return;
  }
  fetchPrizeRaffle();
};

// 使用 debounce 包装 handleClick 函数
const debouncedHandleOpen = debounce(handleOpen, 300);

/**
 * 接口相关
 */

// 奖品列表
const fetchPrizelist = async (id: string) => {
  try {
    const res = await prizelist({
      coupon_id: id,
    });
    data.list = res.data;
  } catch (error) {}
};

// 抽奖
const fetchPrizeRaffle = async () => {
  try {
    const res = await prizeRaffle({
      coupon_id: data.id,
    });
    data.autoplay = true;
    setTimeout(async () => {
      // 先停止自动播放
      data.autoplay = false;

      let index = data.list?.findIndex((item: { id: number }) => item.id == res?.data?.id) || 0;
      if (index == -1) {
        // 未中奖 - 先停止轮播，再修改列表
        data.list = [{ img: notWinning, id: -1, name: '未中奖' }];
      } else {
        data.list = [res.data];
      }
      data.current = 0;

      uni.showModal({
        title: '提示',
        content: res?.msg + (res?.data?.name || ''),
        showCancel: false,
        success: res => {
          if (res.confirm) {
            data.autoplay = false;
          }
        },
      });
    }, 3000);
  } catch (error) {
    // 添加错误处理，确保在出错时也能停止轮播
    data.autoplay = false;
  }
};

onLoad(option => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
  data.id = option?.id;
  fetchPrizelist(option?.id || '');
});
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  .Jackpot-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .wrap {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .active-bg-wrap {
      margin: 464rpx auto 0;
      width: 584rpx;
      height: 564rpx;
      // background: #00191a;
      border-radius: 20rpx;
      position: relative;
      overflow: hidden;
      pointer-events: none; // 阻止页面事件穿透
    }
    .active-column {
      width: 412rpx;
      height: 100%;
      top: 87.5rpx;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      .swiper {
        width: 412rpx;
        height: 100%;
        .carousel-grid {
          width: 100%;
          height: 100%;
          text-align: center;
          .carouse-image-grid {
            width: 380rpx;
            height: 380rpx;
            // background: #004c4d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            // 中间激活状态
            &.active {
              width: 412rpx;
              // background-image: url('https://jogging.qzctdg.com/uploads/ads/20241009/3b5a0c3fda451273865b29ab21f4bb45.png');
              background-position: center center;
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
            .carousel-image {
              width: 412rpx;
              height: 412rpx;
            }
          }
        }
      }
    }
    // 每一格的默认背景
    .active-grid {
      // background: #004c4d;
      width: 380rpx;
      height: 380rpx;
    }
    // 选中的背景
    .active-bg {
      width: 412rpx;
      height: 412rpx;
      & > image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .btn {
    width: 502rpx;
    height: 108rpx;
    margin: 100rpx auto 0;
    .btn-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
